@color: #2cac93;
@light: lighten(@color, 10%);
@size: 150px;

*{
    margin: 0;
    padding: 0;
    border: 0;
    font-family: Arial, "Microsoft Yahei";
}
body{
    padding-bottom: 100px;
}
h2{
    line-height: 50px;
    text-align: center;
}
li{
    list-style: none;
}
.panel{
    width: 90%;
    margin: 4px auto;
    h2{
        text-align: left;
        color: saturate(@color, 20%); 
        font: bold 1.4em/2 Arial, "Microsoft Yahei";   
    }
    > ul{
        overflow: hidden;
        > li{
            float: left;
            width: 25%;
            text-align: center;
            padding: 10px 0;
            height: @size;
            
            /*媒体查询分栏*/
            @media screen and (max-width: 1200px) {
                width: 33.33%;
            }
            @media screen and (max-width: 800px) {
                width: 50%;  
            }
            @media screen and (max-width: 600px) {
                width: 100%;  
            }

            /* W3C */
            display: flex-box;
            box-pack:center;
            box-align:center;
            
            &:nth-child(4n+1){
                background-color: lighten(@color, 55%);
            }
            &:nth-child(4n+2){
                background-color: lighten(@color, 50%);
            }
            &:nth-child(4n+3){
                background-color: lighten(@color, 45%);
            }
            &:nth-child(4n){
                background-color: lighten(@color, 40%);
            }

            position: relative;
            label{
                position: absolute;
                left: 4px;
                top: 4px;
                z-index: 1;
            }
        }
    }
    img{
        max-width: 90%;
        max-height: 100%;
    }
}
.columns-3{
    max-width: 600px;
    margin: 10px auto;
    columns: 160px 3; 
}

@import "shape.less";
@import "button.less";
@import "background.less";
@import "transform.less";
@import "animate.less";

